{% extends 'base.html' %}

{% load static %}

{% block title %}
{{ teacher.me.first_name }}
{% endblock %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/teacher.css' %}">
{% endblock %}

{% block content %}
<div class="container">
	<div class="columns">
		<div class="column col-6 col-lg-8 col-md-10 col-sm-12 col-lg-auto col-md-auto col-sm-auto col-mx-auto">
			{% if students|length < 1 %}
			<div class="empty">
				<div class="empty-icon">
					<i class="icon icon-people"></i>
				</div>
				<p class="empty-title">所有的学生都有老师了</p>
				<p class="empty-subtitle text-gray">添加更多的学生，或者先让其它老师删除自己的学生</p>
				<div class="empty-action">
					<a href="javascript:window.history.back()" class="btn btn-link float-right">返回</a>
				</div>
			</div>
			{% endif %}
<div id="student_list">
	<ul class="menu">
		{% for student in students %}
		<li class="menu-item">
			<div class="menu-badge">
				<button class="btn circle tooltip" data-tooltip="添加该学生" v-on:click="addStudentModal({{teacher.pk}}, {{student.pk}})"><i class="icon icon-plus"></i></button>
			</div>
			{% include 'student-block.html' %}
		</li>
		{% endfor %}
	</ul>

	{% verbatim vue %}
	<div id="add_student_modal" class="modal modal-sm" v-bind:class="{active:add_student_modal_show}">
		<div class="modal-overlay"></div>
		<div class="modal-container">
			<div class="modal-header">
				<p class="modal-title h5">添加</p></div>
			<div class="modal-body">
				<div class="content">
					确定要添加该学生吗？
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" v-on:click="addStudent(false)">取消</button>
				<button class="btn btn-default" v-on:click="addStudent(true)">确定</button>
			</div>
		</div>
	</div>
	{% endverbatim vue %}
</div>
		</div>
	</div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="{% static 'js/js.cookie.js' %}"></script>
<script type="text/javascript" src="{% static 'js/teacher.js' %}"></script>
<script type="text/javascript">
navbar.$set('brand', '{{ teacher.me.first_name }}')
navbar.$set('brand_url', '/teacher/students?teacher_id={{ teacher.pk }}')
</script>
{% endblock %}